
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>两个思想优化90%的代码 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>两个思想优化90%的代码 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">文档中提出了哪两个核心技巧来提升代码质量？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提出的两个核心技巧是：模块化拆分（将复杂逻辑拆解为独立组件）和模式化抽象（用设计模式消除重复代码）。</div>
          </div>
          <div class="card-source">来源: 文档中「优化方案揭秘」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在进行代码拆分时，文档给出了哪三条具体的“拆分技巧”？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 每个方法不超过IDE屏幕高度；2. 类名用名词，方法名用动词；3. 用 `final` 修饰不可变组件。</div>
          </div>
          <div class="card-source">来源: 文档中「一、像乐高一样拆解代码（单一职责原则）」部分的「拆分技巧」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">为了遵循DRY原则并解决物流系统中重复的运费计算代码，文档中采用了什么设计模式？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中采用了“模板方法模式”。该模式通过定义一个通用的计算流程骨架，并将具体的、可变的计算步骤（如`basePrice`, `extraFee`等）延迟到子类中实现，从而消除了重复代码。</div>
          </div>
          <div class="card-source">来源: 文档中「二、拒绝重复造轮子（DRY原则）」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在“订单中心重构案例”中，“纵向拆分”和“横向抽象”分别指什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“纵向拆分”指按功能将庞大的 `OrderService` 拆分为 `OrderValidator`、`PaymentProcessor` 等12个独立组件。“横向抽象”指抽取一个 `AbstractDiscountStrategy` 来统一处理各类重复出现的优惠计算逻辑。</div>
          </div>
          <div class="card-source">来源: 文档中「三、订单中心重构案例」部分的「重构过程」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在订单中心重构案例中，是如何使用策略模式来解决多平台运费计算问题的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">通过定义一个运费计算接口 `ShippingStrategy`，并为不同的平台（如顺丰、京东）提供具体的实现类（`SFShipping`、`JDShipping`），从而将不同平台的运费计算算法封装起来，实现了灵活切换。</div>
          </div>
          <div class="card-source">来源: 文档中「三、订单中心重构案例」部分的「模式应用」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档推荐了哪三个IDEA插件来帮助优化代码？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. **CodeGlance**：用于提供代码地图以快速定位代码；2. **SpotBugs**：用于检测代码中潜在的“坏味道”；3. **SequenceDiagram**：用于自动生成方法的调用时序图。</div>
          </div>
          <div class="card-source">来源: 文档中「四、工具加持让优化事半功倍」部分的「IDEA必备插件」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">新手在代码优化时常犯的错误之一“伪抽象”指的是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“伪抽象”指的是为了抽象而抽象，不必要地增加了代码的复杂度，这是一种常见的错误。</div>
          </div>
          <div class="card-source">来源: 文档中「五、新手常犯的5个错误」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">文档将代码优化的境界分为哪三个层次？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">代码优化的三个境界分为：1. **青铜**（能用就行，面向过程编程）；2. **黄金**（模块清晰，面向对象编程）；3. **王者**（领域驱动，业务语义化）。</div>
          </div>
          <div class="card-source">来源: 文档中「六、从CRUD到架构师的跃迁」部分的「代码优化的三个境界」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在性能对比实验中，批量处理代码是如何优化的，从而将耗时从120ms降至45ms？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">优化方法是将循环内单条保存数据的操作（`save(o)`）改为批量处理。具体做法是先收集所有处理完成的对象，最后调用一次 `repository.saveAll()` 方法进行批量保存。</div>
          </div>
          <div class="card-source">来源: 文档中「六、从CRUD到架构师的跃迁」部分的「性能对比实验」</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
